<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*#div1{ width: 100px; height: 100px; position: absolute; background: red; border-radius: 50px; top: 50px; left: 0;}*/
    </style>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove(300);" />
<div id="div1" style=" width: 100px; height: 100px; position: absolute; background: red; border-radius: 50px; top: 50px; left: 0;"></div>
<span style="width: 1px; height: 300px; background: black; position: absolute; left: 300px; top: 0;"></span>
<div id="div2" style="width: 100px; height: 300px; border: 1px solid #000; position: absolute; left: 300px; top: 300px;"></div>
<script>
//    window.onload = function() {
//        var oDiv2 = document.getElementById('div2');
//        var oDiv = document.getElementById('div1');
//        oDiv2.innerHTML = '<span>'+oDiv.style.left+'</span><br/>';
////        alert(oDiv.style.left);
//    };
    function startMove(iTarget) {
        var oDiv = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');


        timer = setInterval(function(){
            var iSpeed = 0;
            if(oDiv.offsetLeft<iTarget)
            {
                iSpeed = 7;
            }
            else
            {
                iSpeed = -7;
            }
            if(Math.abs(oDiv.offsetLeft-iTarget) < 7)
            {
                clearInterval(timer);
                oDiv.style.left = iTarget + 'px';
            }
            else
            {
                oDiv.style.left = oDiv.offsetLeft+iSpeed+'px';
                oDiv2.innerHTML += '<span>'+oDiv.style.left+'</span><br/>';

            }
        },30);
    }
</script>
</body>
</html>